<template>
  <div class="screen-wrapper">
    <div class="header-container">
      <div class="header-bg">
        上海中医药大学附属龙华医院数据驾驶舱
      </div>
      <div class="header-timer">{{ dateTime }}</div>
    </div>
    <div class="left-sider">
      <daily-total></daily-total>
      <time-trend></time-trend>
      <devops-total></devops-total>
    </div>
    <div class="right-sider">
      <alarm-statistics></alarm-statistics>
      <alarm-list :warn-list="warnList"></alarm-list>
    </div>
    <div id="st_monitor"></div>
  </div>
</template>

<script>
import fengmap from 'fengmap/build/fengmap.map.min'
// import fengmapPlugin from 'fengmap/build/fengmap.plugin.min'
import DailyTotal from '../components/daily_total.vue'
import TimeTrend from '../components/time_trend.vue'
import DevopsTotal from '../components/devops_total.vue'
import AlarmStatistics from '../components/alarm_statistics.vue'
import AlarmList from '../components/alarm_list.vue'
import ReconnectingWebSocket from 'reconnecting-websocket'
import { warnWSApi, alarmWSApi } from '../services/index'
import blackIcon from '../assets/black_icon.png'
import warnIcon from '../assets/warn_icon.png'
import flvjs from 'flv.js'
// import videojs from 'video.js'
// import 'video.js/dist/video-js.min.css'
let map = null
let animation = null
export default {
  name: 'LongHua',
  components: {
    DailyTotal,
    TimeTrend,
    DevopsTotal,
    AlarmStatistics,
    AlarmList
  },
  data () {
    return {
    }
  },
  watch: {
  },
  created () {
   
  },
  mounted () {
  
  },
  beforeDestroy () {
    
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.screen-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  .header-container {
    position: relative;
    width: 100%;
    height: 84px;
    z-index: 9;
  }
  .header-bg {
    width: 100%;
    height: 100%;
    background-size: 100%;
    text-align: center;
    font-size: 26px;
    padding-top: 28px;
    color: #f6a900;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 600;
    box-sizing: border-box;
  }
  .header-timer {
    position: absolute;
    top: 36px;
    right: 38px;
    z-index: 9;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.81);
    font-weight: 600;
    font-family: Menlo;
  }
  .left-sider {
    position: absolute;
    top: 114px;
    left: 25px;
    z-index: 9;
  }
  .right-sider {
    position: absolute;
    top: 114px;
    right: 25px;
    z-index: 9;
  }
  #st_monitor {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .warn-mark-container {
    position: absolute;
    top: 15px;
    left: 48px;
    display: flex;
    justify-content: flex-start;
    padding: 11px 20px 11px 14px;
    background: rgba(140, 53, 53, 0.51);
    border: 1px solid rgba(180, 65, 65, 1);
    box-shadow: inset 0px 0px 10px 0px rgba(228, 24, 24, 0.68);
    border-radius: 10px;
    .avatar-img {
      width: 67px;
      height: 67px;
      margin-right: 16px;
      background: #fff;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .info-item {
      flex: 1;
      white-space: nowrap;
      background-size: 12px;
      padding-left: 24px;
      font-size: 12px;
      color: #ffffff;
      height: 22px;
      line-height: 22px;
      font-weight: 600;
    }
  }
}
</style>
